<template>
  <div class="permission-container">
    <div class="app-container">
      <!-- 表格 -->
      <page-tools>
        <template #slot-left>
          <div />
        </template>
        <template #slot-right>
          <el-button type="primary" size="small" @click="addPerFn(1,'0')">添加权限</el-button>
        </template>

      </page-tools>
      <el-card class="card">
        <!-- <div style="text-align: right; margin-bottom: 20px">
          <el-button type="primary" size="small">添加权限</el-button>
        </div> -->

        <el-table border :data="permissionList" row-key="id">
          <el-table-column label="名称" prop="name" />
          <el-table-column label="标识" prop="code" />
          <el-table-column label="描述" prop="description" />
          <el-table-column label="操作">
            <template v-slot="{row}">
              <el-button v-if="row.type===1" type="text" @click="addPerFn(2,row.id)">添加</el-button>
              <el-button type="text" @click="editPerFn(row)">编辑</el-button>
              <el-button type="text" @click="delPerFn(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <!-- Dialog -->
      <per-dialog ref="perDialog" :is-edit="isEdit" :all-per-list="allPerList" @addperEV="addPermissionFn" />
    </div>
  </div>
</template>

<script>
import { getPermissionListAPI, addPermissionAPI, getPermissionDetailAPI, updatePermissionAPI, delPermissionAPI } from '@/api'
import { transTree } from '@/utils'
import perDialog from './components/perDialog.vue'
export default {
  components: { perDialog },
  data() {
    return {
      // 获取所有的权限点(树形)
      permissionList: [],
      // 判断新增/编辑 true为新增，false为编辑
      isEdit: true,
      // 获取所有的权限点(扁平)
      allPerList: []
    }
  },
  created() {
    // 获取所有的权限点
    this.getPermissionListFn()
  },
  methods: {
    // 获取所有的权限点
    async getPermissionListFn() {
      const res = await getPermissionListAPI()
      // console.log(res)
      this.allPerList = res.data
      this.permissionList = transTree(res.data, '0')
    },

    // 添加权限
    addPerFn(type, pid) {
      this.isEdit = true
      this.$refs.perDialog.showDialog = true
      // this.$refs.perDialog.formData = {}
      this.$refs.perDialog.formData.pid = pid
      this.$refs.perDialog.formData.type = type
    },

    // 添加/编辑权限方法
    async addPermissionFn(formData) {
      if (this.isEdit) {
        const res = await addPermissionAPI(formData)
        if (res.code === 10000) this.$message.success(res.message)
      } else {
        const res = await updatePermissionAPI(formData)
        if (res.code === 10000) this.$message.success(res.message)
      }

      this.getPermissionListFn()
    },

    // 编辑权限点
    async editPerFn(row) {
      this.isEdit = false
      this.$refs.perDialog.showDialog = true
      const res = await getPermissionDetailAPI(row.id)
      // console.log(res)
      this.$refs.perDialog.formData = res.data
    },

    // 删除权限点
    delPerFn(row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const res = await delPermissionAPI(row.id)
        this.$message({
          type: 'success',
          message: res.message
        })
        this.getPermissionListFn()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }

}
</script>

<style lang="scss" scoped>
.card{
  margin-top: 10px;
}
</style>

